import { fetchDicts } from "@userList/utils";
import styles from "./index.module.less";
import { channel_id, isResetMap, merchant_id } from "./store";
import { getLastWeek } from "./utils";
import { dicts } from "@userList/dict";
import IMToolTip from "@/components/common/ToolTip";
export default defineComponent({
  emits: ["refreshData"],
  setup(props, { expose, emit }) {
    const _self = reactive<any>(getCurrentInstance());
    const formatDate = reactive<any>({
      new: undefined,
      new_summary: undefined,
      loss: undefined,
      loss_summary: undefined,
      total: undefined,
      new_rate: undefined,
      loss_rate: undefined,
      new_summary_rate: undefined,
      loss_summary_rate: undefined,
      total_rate: undefined,
    });
    const merchantMap = ref<any>([]);
    const channelMap = ref<any>([]);
    const fetchData = async () => {
      const res = await channelApi.chart.querChannelFact({
        merchant_id: !isEmptyType(merchant_id.value)
          ? merchant_id.value
          : undefined,
        channel_id: !isEmptyType(channel_id.value)
          ? channel_id.value
          : undefined,
      });
      const { data } = res;
      initObjAttr(formatDate, data, "target");
    };
    const fetchSearchMap = async () => {
      const res: any = await fetchDicts();
      dicts.value = res;
      merchantMap.value = [{ label: $t("dict6"), value: "" }].concat(
        res?.merchantUsers?.map((item) => ({
          label: item.name,
          value: item.id,
        })) ?? []
      );
      if (isResetMap.value) {
        channelMap.value = [{ label: $t("dict6"), value: "" }].concat(
          res?.channel?.map((item) => ({
            label: item.name,
            value: item.id,
          })) ?? []
        );
      }
    };
    const initPage = () => {
      fetchSearchMap();
      fetchData();
    };
    expose({ initPage });
    const datesArray = getLastWeek();
    return () => (
      <div class={styles.chainnel_fact}>
        <div
          class={styles.Flex_wrap}
          style="background: #ffffff;margin-bottom: 0px;"
        >
          <div class={styles.flex_item}>
            <div class={styles.title}>{$t("channel9")}</div>
            <div>
              <span>{$t("table232")}：</span>
              <span>{datesArray[datesArray.length - 2]}</span>
            </div>
          </div>

          <div class={styles.search}>
            <div class={styles.flex_item}>
              <div class={styles.title}>{$t("table14")}</div>
              <div>
                <a-select
                  v-model:value={merchant_id.value}
                  style="width: 150px"
                  placeholder={$t("placeholder24")}
                  options={merchantMap.value}
                  showSearch={true}
                  filterOption={filterOption}
                  onChange={(value) => {
                    isResetMap.value = false;
                    channel_id.value = "";
                    emit("refreshData");
                    channelMap.value = [
                      { label: $t("dict6"), value: "" },
                    ].concat(
                      dicts.value.channel
                        ?.filter(({ merchant_uid }: any) => {
                          if (isEmptyType(value)) return true;
                          return merchant_uid === value;
                        })
                        ?.map?.((item) => ({
                          label: item.name,
                          value: item.id,
                        })) ?? []
                    );
                  }}
                ></a-select>
              </div>
            </div>
            <div class={styles.flex_item}>
              <div class={styles.title}>{$t("table66")}</div>
              <div>
                <a-select
                  v-model:value={channel_id.value}
                  style="width: 150px"
                  placeholder={$t("placeholder37")}
                  options={channelMap.value}
                  showSearch={true}
                  filterOption={filterOption}
                  onChange={(value) => {
                    if (!isEmptyType(value)) {
                      const item: any = dicts.value.merchantUsers.find(
                        ({ channel_ids }: any) => channel_ids.includes(value)
                      );
                      merchant_id.value = item.id;
                    } else
                      channelMap.value = [
                        { label: $t("dict6"), value: "" },
                      ].concat(
                        dicts.value.channel.map?.((item) => ({
                          label: item.name,
                          value: item.id,
                        })) ?? []
                      );
                    emit("refreshData");
                  }}
                ></a-select>
              </div>
            </div>
          </div>
        </div>
        <div class={styles.Grid_wrap}>
          <div class={styles.grid_item}>
            <div class={styles.title}>
              <div class={styles.text}>{$t("channel10")}</div>
              <div class={styles.icon}>
                <im-tooltip
                  color="#ffffff"
                  defaultValue={<info-circle-filled />}
                  title={
                    <div style="color: #333333;">
                      {`0-24${$t("channel11")}(${$t("channel12")})`}
                    </div>
                  }
                />
              </div>
            </div>
            <div class={styles.content}>
              <div class={styles.today}>{formatDate.new}</div>
              <div class={styles.yesterday}>
                <i>{$t("channel13")}</i>
                <i class={styles.green}>{formatDate.new_rate}</i>
              </div>
            </div>
          </div>

          <div class={styles.grid_item}>
            <div class={styles.title}>
              <div class={styles.text}>{$t("channel14")}</div>
              <div class={styles.icon}>
                <im-tooltip
                  // @ts-ignore
                  vSlots={{
                    defaultValue: () => <info-circle-filled />,
                    title: () => (
                      <div style="color: #333333;">
                        {`0-24${$t("channel15")}`}
                      </div>
                    ),
                  }}
                  color="#ffffff"
                />
              </div>
            </div>
            <div class={styles.content}>
              <div class={styles.today}>{formatDate.loss}</div>
              <div class={styles.yesterday}>
                <i>{$t("channel16")}</i>
                <i class={styles.red}>{formatDate.loss_rate}</i>
              </div>
            </div>
          </div>

          <div class={styles.grid_item}>
            <div class={styles.title}>
              <div class={styles.text}>{$t("table209")}</div>
              <div class={styles.icon}>
                <im-tooltip
                  color="#ffffff"
                  defaultValue={<info-circle-filled />}
                  title={
                    <div style="color: #333333;">
                      {`${$t("channel17")}(${$t("channel12")})`}
                    </div>
                  }
                />
              </div>
            </div>
            <div class={styles.content}>
              <div class={styles.today}>{formatDate.new_summary}</div>
              <div class={styles.yesterday}>
                <i>{$t("channel13")}</i>
                <i class={styles.green}>{formatDate.new_summary_rate}</i>
              </div>
            </div>
          </div>

          <div class={styles.grid_item}>
            <div class={styles.title}>
              <div class={styles.text}>{$t("table211")}</div>
              <div class={styles.icon}>
                <im-tooltip
                  color="#ffffff"
                  defaultValue={<info-circle-filled />}
                  title={
                    <div style="color: #333333;">
                      {`${$t("channel18")}N${$t("channel19")}`}
                    </div>
                  }
                />
              </div>
            </div>
            <div class={styles.content}>
              <div class={styles.today}>{formatDate.loss_summary}</div>
              <div class={styles.yesterday}>
                <i>{$t("channel13")}</i>
                <i class={styles.green}>{formatDate.loss_summary_rate}</i>
              </div>
            </div>
          </div>

          <div class={styles.grid_item}>
            <div class={styles.title}>
              <div class={styles.text}>{$t("table212")}</div>
              <div class={styles.icon}>
                <im-tooltip
                  color="#ffffff"
                  defaultValue={<info-circle-filled />}
                  title={
                    <div style="color: #333333;">
                      {`${$t("channel20")}(${$t("channel12")})`}
                    </div>
                  }
                />
              </div>
            </div>
            <div class={styles.content}>
              <div class={styles.today}>{formatDate.total}</div>
              <div class={styles.yesterday}>
                <i>{$t("channel13")}</i>
                <i class={styles.green}>{formatDate.total_rate}</i>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  },
});
